<template>
  <Row :gutter="16">
    <Col span="12">
      <panel title="UAT环境" :enableToggle="false">
        <template slot="extra">
          <Button icon="md-copy" shape="circle" type="primary" @click="copyValues('uat', uat)">复制</Button>
        </template>
        <h5>已提交的单据统计</h5>
        <Table border :columns="columns" :data="uat.submits"></Table>

        <h5>已审核的单据统计</h5>
        <Table border :columns="columns" :data="uat.audits"></Table>
      </panel>
    </Col>
    <Col span="12">
      <panel title="正式环境" :enableToggle="false">
        <template slot="extra">
          <Button icon="md-copy" shape="circle" type="primary" @click="copyValues('prod', prod)">复制</Button>
        </template>
        <h5>已提交的单据统计</h5>
        <Table border :columns="columns" :data="prod.submits"></Table>

        <h5>已审核的单据统计</h5>
        <Table border :columns="columns" :data="prod.audits"></Table>
      </panel>
    </Col>
  </Row>
</template>
<script>
import dayjs from 'dayjs';
export default {
  data() {
    return {
      columns: [
        { title: '名称', key: 'Name', width: 180 },
        { title: '值', key: 'Value' }
        // {
        //   title: " ",
        //   width: 100,
        //   render: (h, { row }) => {
        //     return h('Button', {
        //       props: {
        //         icon: 'md-copy',
        //         shape: 'circle',
        //         size: 'small'
        //       },
        //       on: {
        //         click: () => {
        //           this.$copyText(row.Value).then(() => {
        //             this.$Message.success("结果已复制！");
        //           });
        //         }
        //       }
        //     }, '复制');
        //   }
        // }
      ],
      uat: {
        submits: [],
        audits: []
      },
      prod: {
        submits: [],
        audits: []
      }
    };
  },
  methods: {
    submits(env) {
      this.$http.get(`/api/iworkflow/${env}/statistics/submits`).then(res => {
        this[env].submits = res.datas;
      });
    },
    audits(env) {
      this.$http.get(`/api/iworkflow/${env}/statistics/audits`).then(res => {
        this[env].audits = res.datas;
      });
    },
    copyValues(type, datas) {
      let date = dayjs().format('YYYY/MM/DD');
      this.$copyText(`${date}\t${type.toUpperCase()}\t${datas.submits[0].Value || 0}\t${datas.audits[0].Value || 0}\t0\t0`).then(() => {
        this.$Message.success('结果已复制！');
      });
    }
  },
  mounted() {
    this.submits('uat');
    this.audits('uat');

    this.submits('prod');
    this.audits('prod');
  }
};
</script>
<style lang="less" scoped>
.ivu-card-body {
  h5 {
    font-size: 14px;
    padding: 2px 5px 5px 0;
  }

  .ivu-table-wrapper {
    margin-bottom: 15px;
  }
}
</style>
